<template>
  <a-modal
    :visible="visibleValue"
    :title="title"
    :width="width"
    :footer="null"
    :destroyOnClose="true"
    @cancel="handleCancel"
  >
    <div class="file-preview-container">
      <!-- PDF预览 -->
      <iframe
        v-if="fileType === 'pdf'"
        :src="previewUrl"
        width="100%"
        height="600"
        frameborder="0"
      ></iframe>
      
      <!-- 图片预览 -->
      <div v-else-if="isImage" class="image-preview">
        <img :src="previewUrl" :alt="fileName" style="max-width: 100%;" />
      </div>
      
      <!-- 视频预览 -->
      <div v-else-if="isVideo" class="video-preview">
        <video controls width="100%" :src="previewUrl">
          您的浏览器不支持视频播放
        </video>
      </div>
      
      <!-- 音频预览 -->
      <div v-else-if="isAudio" class="audio-preview">
        <audio controls :src="previewUrl">
          您的浏览器不支持音频播放
        </audio>
      </div>
      
      <!-- 其他文件类型 -->
      <div v-else class="file-preview-fallback">
        <p>
          无法预览该文件，请
          <a :href="downloadUrl" target="_blank">下载</a>
          后查看。
        </p>
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="file-preview-footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="handleDownload">下载</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { Modal, Button } from 'ant-design-vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  filePath: {
    type: String,
    default: '',
  },
  fileType: {
    type: String,
    default: '',
  },
  fileName: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:visible', 'cancel']);

// 计算属性
const visibleValue = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

const title = computed(() => props.fileName || '文件预览');
const width = computed(() => {
  if (props.fileType === 'pdf' || isVideo.value) {
    return '90%';
  }
  return '800px';
});

const isImage = computed(() => 
  ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(props.fileType)
);

const isVideo = computed(() => 
  ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(props.fileType)
);

const isAudio = computed(() => 
  ['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(props.fileType)
);

const previewUrl = computed(() => {
  if (!props.filePath) return '';
  return `/sys/common/static/${props.filePath}`;
});

const staticUrl = computed(() => getFileAccessHttpUrl(props.dbPath));
const downloadUrl = computed(() => getFileAccessHttpUrl(props.dbPath));

// 方法
function handleCancel() {
  emit('update:visible', false);
  emit('cancel');
}

function handleDownload() {
  if (downloadUrl.value) {
    window.open(downloadUrl.value, '_blank');
  }
}
</script>

<style lang="less" scoped>
.file-preview-container {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  
  .image-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    
    img {
      max-height: 70vh;
      object-fit: contain;
    }
  }
  
  .file-preview-fallback {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    
    p {
      font-size: 16px;
    }
  }
  
  .file-preview-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style> 